<template>
  <div class="m-btn-group">
    <ul>
      <li @click="handelChange(index,item)" :class="{'active':activeIndex === index}" v-for="(item,index) in list">
        <i></i>
        <span>{{ item.name }}</span></li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'MBtnGroup',
  props: {
    activeIndex: {
      type: Number,
      default: 0
    },
    list: {
      type: Array,
      default() {
        return []
      }
    }
  },
  methods: {
    handelChange(index, item) {
      this.$emit('change', index, item)
    }
  }
}
</script>

<style scoped lang="scss">
.m-btn-group {
  margin-bottom: 10px;
  margin-top: 15px;
  > ul {
    display: flex;
    > li {
      position: relative;
      cursor: pointer;
      padding: 0 7px;
      height: 35px;
      line-height: 35px;
      margin-left: 15px;
      min-width: 120px;
      text-align: center;
      color: rgba(255,255,255,0.5);
      font-size: 18px;
      > i {
        position: absolute;
        top: 0;
        left: 20px;
        right: 25px;
        bottom: 0;
        background: url("./images/base02.png") no-repeat center;
        background-size: 100% 100%;
      }
      &:before {
        content: '';
        display: block;
        height: 100%;
        width: 20px;
        background: url("./images/base01.png") no-repeat center;
        background-size: 100% 100%;
        position: absolute;
        top: 0;
        left: 0;
      }
      &:after {
        content: '';
        display: block;
        height: 100%;
        width: 25px;
        background: url("./images/base03.png") no-repeat center;
        background-size: 100% 100%;
        position: absolute;
        top: 0;
        right: 0;
      }
      &.active{
        color: #00C6FF;
        >i{
          background: url("./images/active02.png") no-repeat center;
          background-size: 100% 100%;
        }
        &:before{
          background: url("./images/active01.png") no-repeat center;
          background-size: 100% 100%;
        }
        &:after{
          background: url("./images/active03.png") no-repeat center;
          background-size: 100% 100%;
        }
      }
    }
  }
}
</style>
